<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="网上购物,电脑,手机" />
    <meta name="description" content="京东说明" />
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- 
        SEO优化:方便搜索引擎快速精确找到该网站
        标题 title 
        关键字 keywords
        说明 description
     -->
    <!-- 引入ico图标 一定要放在根目录下 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 由外到内，由大到小 -->
    <!-- 1、一定要写注释 2、写语义化标签 -->
    <!-- 顶部广告 -->
    <section class="topAdvert">
        <div class="topAdvert-mid">
            <img src="images/delete.png">
        </div>
    </section>
    <!-- 顶部导航 -->
    <nav class="topNav">
        <div class="topNav-mid">
            <div class="address"><img src="images/address.png"><span>河北</span></div>
            <ul>
                <li><a href="#">你好，请登录</a>&nbsp;&nbsp;<a href="#">免费注册</a></li>
                <li></li>
                <li><a href="#">我的订单</a></li>
                <li></li>
                <li><a href="#">我的京东</a></li>
                <li></li>
                <li><a href="#">京东会员</a></li>
                <li></li>
                <li><a href="#">企业采购</a></li>
                <li></li>
                <li><a href="#">客户服务</a></li>
                <li></li>
                <li><a href="#">网站导航</a></li>
                <li></li>
                <li><a href="#">手机京东</a></li>
            </ul>
        </div>
    </nav>
    <!-- 头部区域 -->
    <header>
        <div class="h-main">
            <div class="h-left"></div>
            <div class="h-mid">
                <div class="searchCar">
                    <form class="search" action="#" method="GET">
                        <input type="text" placeholder="京东商城购物">
                        <img src="images/camare.png">
                        <button><img src="images/search.png"></button>
                    </form>
                    <div class="car">
                        <div class="left">
                            <img src="images/car.png">
                            <div>0</div>
                        </div>
                        <div class="right">
                            <sapn>我的购物车</sapn>
                        </div>
                    </div>
                </div>
                <div class="littleNav">
                    <ul>
                        <li><a href="#">智能出行</a></li>
                        <li><a href="#">电脑数码</a></li>
                        <li><a href="#">电视影音</a></li>
                        <li><a href="#">优畅享20</a></li>
                        <li><a href="#">奇异果 </a></li>
                        <li><a href="#">健康美食</a></li>
                        <li><a href="#">粉丝日 </a></li>
                        <li><a href="#">品质男装</a></li>
                        <li><a href="#">春茶拍卖</a></li>
                    </ul>
                </div>
                <div class="bigNav">
                    <ul>
                        <li><a href="#">秒杀</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">PLUS会员</a></li>
                        <li><a href="#">品牌闪购</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">京东家电</a></li>
                        <li><a href="#">京东超市</a></li>
                        <li><a href="#">京东生鲜</a></li>
                        <li><a href="#">京东国际</a></li>
                        <li><a href="#">京东云</a></li>
                    </ul>
                </div>
            </div>
            <div class="h-right">

            </div>
        </div>
    </header>
    <!-- 主体内容区域 -->
    <section class="main">
        <!-- 主体内容的第一个盒子 -->
        <div class="first-box">
            <!-- 第一个盒子的左侧导航 -->
            <nav class="fb-left">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li>
                    <li><a href="#">电脑</a>/<a href="#">办公</a></li>
                    <li><a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家裝</a>/<a href="#">厨具</a></li>
                    <li><a href="#">装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
                    <li><a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a></li>
                    <li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
                    <li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
                    <li><a href="#">产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
                    <li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
                    <li><a href="#">郃</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a></li>
                    <li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
                    <li><a href="#">医药保健</a>/<a href="#">计生情趣</a></li>
                    <li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书.</a></li>
                    <li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
                    <li><a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></li>
                    <li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
                    <li><a href="#">工业品</a></li>
                </ul>
            </nav>
            <!-- 中间轮播图 -->
            <div class="swiper">
                <img src="images/q.jpg" alt="">
                <!-- 轮播图小点 -->
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="leftBtn"><img src="images/leftPoint.png" alt=""></div>
                <div class="rightBtn"><img src="images/rightPoint.png" alt=""></div>
            </div>
            <!-- 推荐的三张图片 -->
            <div class="recommend">
                <img src="images/a.jpg.webp" alt="">
                <img src="images/b.jpg.webp" alt="">
                <img src="images/c.jpg.webp" alt="">
            </div>
            <!-- 右侧盒子 -->
            <div class="fb-right">
                <div class="login">
                    <div class="login-top">
                        <div class="headpic"><img src="images/headpic.png" alt=""></div>
                        <div class="user-show">
                            <p><a href="#">Hi~欢迎逛京东！</a></p>
                            <p><a href="#">登录 </a><span>|</span><a href="#"> 注册</a></p>
                        </div>
                    </div>
                    <div class="login-btm">
                        <button>新人福利</button>
                        <button>PLUS会员</button>
                    </div>
                </div>
                <div class="news">
                    <div class="news-title">
                        <h5>京东快报</h5>
                        <a href="#">更多></a>
                    </div>
                    <ul class="news-list">
                        <li><span>推荐</span><a href="#">多亏有了vivo S9手机，才能在夜晚拍出清晰照片</a></li>
                        <li><span>最新</span><a href="#">小户家庭保鲜能手，美的230升三门冰箱评测</a></li>
                        <li><span>推荐</span><a href="#">美的零电洗电热水器，洗澡更安全</a></li>
                        <li><span>热议</span><a href="#">恒温是舒适的守护，净水是生活的滋养</a></li>
                    </ul>
                </div>
                <div class="service">
                    <ul>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>话费</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>机票</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>酒店</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>游戏</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>加油卡</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>火车票</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>众筹</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>理财</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>白条</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>电影票</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>企业购</p>
                            </a></li>
                        <li><a href="#">
                                <div class="img"></div>
                                <p>礼品卡</p>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 秒杀 -->
        <div class="seckill">
            <!-- 秒杀 -->
            <div class="seckill-countdown">
                <h1>京东秒杀</h1>
                <p><b>12:00 </b>点场 距结束</p>
                <ul>
                    <li>00</li>
                    <li>:</li>
                    <li>18</li>
                    <li>:</li>
                    <li>35</li>
                </ul>
            </div>
            <!-- 秒杀列表 -->
            <div class="seckill-list">
                <ul>
                    <li>
                        <a class="list-lia" href="#">
                            <div class="sl-top">
                                <img src="images/sl1.jpg" alt=""
                                    title="联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲">
                            </div>
                            <div class="sl-btm">
                                <p>联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲</p>
                                <div>
                                    <ul>
                                        <li>&yen;100.00</li>
                                        <li></li>
                                        <li>&yen;1000.00</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="list-lia" href="#">
                            <div class="sl-top">
                                <img src="images/sl1.jpg" alt=""
                                    title="联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲">
                            </div>
                            <div class="sl-btm">
                                <p>联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲</p>
                                <div>
                                    <ul>
                                        <li>&yen;100.00</li>
                                        <li></li>
                                        <li>&yen;1000.00</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="list-lia" href="#">
                            <div class="sl-top">
                                <img src="images/sl1.jpg" alt=""
                                    title="联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲">
                            </div>
                            <div class="sl-btm">
                                <p>联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲</p>
                                <div>
                                    <ul>
                                        <li>&yen;100.00</li>
                                        <li></li>
                                        <li>&yen;1000.00</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="list-lia" href="#">
                            <div class="sl-top">
                                <img src="images/sl1.jpg" alt=""
                                    title="联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲">
                            </div>
                            <div class="sl-btm">
                                <p>联想拯救者电竞手机Pro 12GB+256GB 骁龙865 Plus 内配90W适配器 144Hz电竞屏 双模5G游戏手机 炽焰战甲</p>
                                <div>
                                    <ul>
                                        <li>&yen;100.00</li>
                                        <li></li>
                                        <li>&yen;1000.00</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                    </li>
                    <div class="sl-leftBtn"><img src="images/leftPoint.png" alt=""></div>
                    <div class="sl-rightBtn"><img src="images/rightPoint.png" alt=""></div>
                </ul>
            </div>
            <!-- 秒杀广告 -->
            <div class="seckill-brand">
                <div class="b-pic"><img src="images/b-pic.jpg" alt=""></div>
                <div class="b-info">
                    <p>户外出游好时节</p>
                    <p>满599减150</p>
                    <button>品类秒杀&gt;</button>
                </div>
            </div>
        </div>
    </section>
    <nav class="rightNav">
        <ul>
            <a href="#">
                <li>京东秒杀</li>
            </a>
            <a href="#">
                <li>特色优选</li>
            </a>
            <a href="#">
                <li>频道广场</li>
            </a>
            <a href="#">
                <li>为你推荐</li>
            </a>
            <a href="#">
                <li>
                    <div class="kf"></div>
                    客服

                </li>
            </a>
            <a href="#">
                <li>
                    <div class="fk"></div>
                    反馈

                </li>
            </a>
            <a href="#">
                <li>
                    <div class="sjt"></div>
                    顶部
                </li>
            </a>
        </ul>
    </nav>
    <!-- 底部区域 -->
    <footer>
        <div class="mod_service">
            <ul>
                <li>
                    <div class="service_sprite"></div>
                    <p>品类齐全，轻松购物</p>
                </li>
                <li>
                    <div class="service_sprite"></div>
                    <p>多仓直发，极速配送</p>
                </li>
                <li>
                    <div class="service_sprite"></div>
                    <p>正品行货，精致服务</p>
                </li>
                <li>
                    <div class="service_sprite"></div>
                    <p>天天低价，畅选无忧</p>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <ul>
                <li class="help-item">
                    <ul>
                        <li>购物指南</li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">购物流程</a></li>
                    </ul>
                </li>
                <li class="help-item">
                    <ul>
                        <li>配送方式</li>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">上门自提</a></li>
                    </ul>
                </li>
                <li class="help-item">
                    <ul>
                        <li>支付方式</li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">货到付款</a></li>
                    </ul>
                </li>
                <li class="help-item">
                    <ul>
                        <li>售后服务</li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">售后政策</a></li>
                    </ul>
                </li>
                <li class="help-item">
                    <ul>
                        <li>特色服务</li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">夺宝岛</a></li>
                    </ul>
                </li>
                <li class="help-item help-last">
                    <ul>
                        <li>京东自营覆盖区县</li>
                        <li>
                            京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
                        </li>
                        <li><a href="#">查看详情></a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="mod_copyright">
            <div class="mod_copyright_mid">
                <p class="mc">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">联系客服</a>
                    <span>|</span>
                    <a href="#">合作招商</a>
                    <span>|</span>
                    <a href="#">商家帮助</a>
                    <span>|</span>
                    <a href="#">营销中心</a>
                    <span>|</span>
                    <a href="#">手机京东</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                    <span>|</span>
                    <a href="#">销售联盟</a>
                    <span>|</span>
                    <a href="#">京东社区</a>
                    <span>|</span>
                    <a href="#">风险监测</a>
                    <span>|</span>
                    <a href="#">隐私政策</a>
                    <span>|</span>
                    <a href="#">京东公益</a>
                    <span>|</span>
                    <a href="#">English Site</a>
                    <span>|</span>
                    <a href="#">Media &amp; IR</a>
                </p>
                <div class="mc-info">
                    <div class="mc-cert">
                        <p class="mc">
                            <a href="">京公网安备 11000002000088号</a>
                            <span>|</span>
                            <a href="#">京ICP备11041704号</a>
                            <span>|</span>
                            <a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
                            <span>|</span>
                            <span>新出发京零&nbsp;字第大120007号</span>
                        </p>
                        <p class="mc">
                            <span>互联网出版许可证编号新出网证(京)字150号</span>
                            <span>|</span>
                            <a href="#">出版物经营许可证</a>
                            <span>|</span>
                            <a href="#">网络文化经营许可证京网文[2020]6112-1201号</a>
                            <span>|</span>
                            <span>违法和不良信息举报电话：4006561155</span>
                        </p>
                        <p class="mc">
                            <span>Copyright&nbsp;©&nbsp;2004&nbsp;-&nbsp;2021&nbsp;&nbsp;京东JD.com&nbsp;版权所有</span>
                            <span>|</span>
                            <span>消费者维权热线：4006067733</span>
                            <span>|</span>
                            <a href="#">经营证照</a>
                            <span>|</span>
                            <span>(京)网械平台备字(2018)第00003号</span>
                            <span>|</span>
                            <a href="#">营业执照</a>
                        </p>
                    </div>
                    <div class="mc-inner">
                        <p class="mc">
                            <a href="#"><i></i>Global Site</a><span>|</span>
                            <a href="#"><i></i>Сайт России</a><span>|</span>
                            <a href="#"><i></i>Situs Indonesia</a><span>|</span>
                            <a href="#"><i></i>Sitio de España</a><span>|</span>
                            <a href="#"><i></i>เว็บไซต์ประเทศไทย</a>
                        </p>
                    </div>
                    <div class="mc-subsites">
                        <p class="mc">
                            <span>京东旗下网站：</span>
                            <a href="#">京东钱包</a>
                            <span>|</span>
                            <a href="#">京东云</a>
                        </p>
                    </div>
                    <p class="mc auth">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>